<template>
    <!-- 搜起降地 -->
    <div class="Takeoffandlandingplace">
        <el-form :inline="true" ref="ruleFormRef" label-position="top" :model="Takeoffandlandingplace" :rules="rules"
            class="animate__animated animate__slideInRight">
            <div class="departure_and_arrival">
                <!-- 出发城市 -->
                <div class="departure_city">
                    <el-form-item prop="departure_city" @click="departure_city = !departure_city">
                        <el-input v-model="Takeoffandlandingplace.departure_city" size="large" placeholder="出发城市"
                            @blur="departure_city = false" :prefix-icon="LocalTwo" />
                        <div class="card" v-show="departure_city">
                            <el-card class="box-card">
                                <template #header>
                                    <div class="card-header"><span>出发城市</span></div>
                                </template>
                                <div v-for="item in city" class="text" :key="item.index">
                                    <div @mousedown="upCityChoice(item)">
                                        {{ item }}
                                    </div>
                                </div>
                            </el-card>
                        </div>
                    </el-form-item>
                    <div class="departure_city_border"></div>
                </div>
                <!-- 转换 -->
                <el-button @click="exchange" class="switch_btn">
                    <Switch theme="outline" size="24" fill="#333" />
                </el-button>
                <!-- 到达城市 -->
                <div class="reach_the_city">
                    <el-form-item prop="reach_the_city" @click="reach_the_city = !reach_the_city">
                        <el-input v-model="Takeoffandlandingplace.reach_the_city" size="large" placeholder="到达城市"
                            @blur="reach_the_city = false" :prefix-icon="LocalTwo" />
                        <div class="card" v-show="reach_the_city">
                            <el-card class="box-card">
                                <template #header>
                                    <div class="card-header"><span>出发城市</span></div>
                                </template>
                                <div v-for="item in city" class="text" :key="item.index">
                                    <div @mousedown="downCityChoice(item)">
                                        {{ item }}
                                    </div>
                                </div>
                            </el-card>
                        </div>
                    </el-form-item>
                    <div class="reach_the_city_border"></div>
                </div>
            </div>
            <!-- 出发日期 -->
            <div class="departure_date">
                <el-form-item prop="departure_date">
                    <el-date-picker v-model="Takeoffandlandingplace.departure_date" format="YYYY/MM/DD"
                        value-format="YYYY-MM-DD" type="date" placeholder="出发日期" size="large" :disabled-date="disabled"
                        style="width: 279px" />
                </el-form-item>
                <div class="departure_date_border"></div>
            </div>
            <!-- 查询按钮 -->
            <el-button class="Takeoffandlandingplace_btn" color="rgb(10,22,46)" round @click="onSubmit_t">
                <el-icon>
                    <Search />
                </el-icon>
            </el-button>
        </el-form>
    </div>

</template>

<script setup>
import {ref, reactive, getCurrentInstance} from 'vue'
import { Search } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import {Switch,LocalTwo} from "@icon-park/vue-next"
import url from "../../common/js/APIUtil";
import { useRouter, useRoute } from "vue-router";

//路由
const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance();
// 数据
const Takeoffandlandingplace = reactive({
    departure_city:'',
    reach_the_city:'',
    departure_date:'',
})
const city = ref([])
const departure_city = ref(false);
const reach_the_city = ref(false);
const disabled = (time)=>{
  return time.getTime() < Date.now() - 8.64e7 - (1*1000*60*60*24*3);
}
// 验证
const ruleFormRef = ref()
const rules = reactive({
    departure_city: [{ required: true, message: "出发城市不能为空", trigger: "blur" }],
    reach_the_city: [{ required: true, message: "到达城市不能为空", trigger: "blur" }],
    departure_date: [{ required: true, message: "出发日期不能为空", trigger: "blur" }],
})
// 提交查询
const onSubmit_t = () => {
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      router.push({
        path: "/index/flightdynamic/list",
        query: {
            upCity: Takeoffandlandingplace.departure_city,
            downCity: Takeoffandlandingplace.reach_the_city,
            upDate: Takeoffandlandingplace.departure_date,
            },
        })
    } else {
      ElMessage.error("请输入正确数据");
      return false;
    }
  });
};
// 转换
const exchange_data = ref();
const exchange = () => {
  exchange_data.value = Takeoffandlandingplace.departure_city;
  Takeoffandlandingplace.departure_city = Takeoffandlandingplace.reach_the_city;
  Takeoffandlandingplace.reach_the_city = exchange_data.value;
};
// 获取数据
const getCityAll = () => {
  proxy.$http.get(url.API_GET_citAll).then((res) => {
    city.value = Array.from(new Set(res.data.map(value=>value.name)))
  });
};
getCityAll();
// 输入框提示
// 出发城市
const upCityChoice = (value) => {
  Takeoffandlandingplace.departure_city = value;
  departure_city.value = false;
};
// 到达城市
const downCityChoice = (value) => {
  Takeoffandlandingplace.reach_the_city = value;
  reach_the_city.value = false;
};

</script>

<style lang="less" scoped>


// 起降地查询
.Takeoffandlandingplace{
    width: 85%;
    height: 100px;
    margin: auto;
    // box-shadow: var(--el-box-shadow-dark);
    // border: 1px solid #000;
    transform: translate(-1.5%, 20%);
}
//
.departure_and_arrival{
    width: 60%;
    height: 92px;
    border: 1px solid #e4e7ed;
    border-radius: 10px;
}
// 出发城市
.departure_city{
    width: 47%;
    height:92px;
    transform: translate(0%, 0%);
    pointer-events: auto;
}
.departure_city_border{
    width: 85%;
    position: absolute;
    pointer-events: none;
    border: 1px solid #e4e7ed;
    transform: translate(9%, -40px);
}
// 到达城市
.reach_the_city{
    width: 47%;
    height:92px;
    transform: translate(113%, -126.6%);
    pointer-events: auto;
}
.reach_the_city_border{
    width: 85%;
    position: absolute;
    pointer-events: none;
    border: 1px solid #e4e7ed;
    transform: translate(9%, -40px);
}
// 出发日期
.departure_date{
    width: 28%;
    height:92px;
    pointer-events: auto;
    transform: translate(8.5%, 0%);
}
.departure_date_border{
    width: 80%;
    position: absolute;
    pointer-events: none;
    border: 1px solid #e4e7ed;
    transform: translate(13%, -40px);
}
// 转换
.switch_btn{
    border: none;
    transform: translate(578%, -241%);
    background-color: rgba(0, 0, 0, 0.0);
}
// 查询按钮
.Takeoffandlandingplace_btn{
    font-size: 18px;
    height: 92px;
    width: 92px;
    transform: translate(50%, 0%);
}

//城市
.card-header{
    height: 5px;
    transform: translate(0%, -140%);
}
.card{
    position: absolute;
    width: 400px;
    top: 110px;
    z-index: 2000;
    pointer-events: auto;
}
.text {
  float: left;
  font-size: 15px;
  margin-right: 20px;
  margin-bottom: 20px;
  cursor: pointer;
}
.text:hover {
  color: rgba(6, 127, 249);
  background-color: rgba(6, 127, 249, 0.1);
}
// ---------- //
.el-button.is-round {
    border-radius: 8px;
}
:deep(.el-input--large .el-input__inner){
  height: 92px;
}
:deep(.el-form--inline .el-form-item) {
    margin-right: 0px;
}
:deep(.el-input__inner) {
    width: 100%;
    flex-grow: 1;
    -webkit-appearance: none;
    color: var(--el-input-text-color,var(--el-text-color-regular));
    font-size: 20px;
    height: 42px;
    line-height: 32px;
    padding: 0;
    outline: 0;
    border: none;
    background: 0 0;
}
:deep(.el-input__wrapper){
  border-radius: 10px;
}
:deep(.el-input--large) {
    font-size: 20px;
}
</style>